<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>交易记录</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="clearfix mb-20">
            <Button custom-icon="iconfont icon-yunduanxiazai"
                    size="small"
                    type="success"
                    style="float:right"
                    @click="exportExcel">
              导出
            </Button>

            <Col span="5"
                 class="mr-10">
            <sele @ProvinceData="childByValue"></sele>
            </Col>
            <DatePicker class="mr-10"
                        type='date'
                        @on-change='startTime($event)'
                        placeholder='起始时间'
                        style='width: 200px'></DatePicker>

            <DatePicker class="mr-10"
                        type='date'
                        @on-change='endTime($event)'
                        placeholder='结束时间'
                        style='width: 200px'></DatePicker>
            <Input class="mr-10"
                   v-model="queryData.businessName"
                   placeholder="商户名称"
                   style="width: 200px" />
                    <Input class="mr-10"
                   v-model="queryData.insertName"
                   placeholder="经手人"
                   style="width: 200px" />
            <Button type="primary"
                    custom-icon="iconfont icon-chaxun"
                    size="small"
                    @click="getTableData">查找</Button>
          </div>
          <div class="normal-list-page-bd">
            <Table border
                   :loading="list.loading"
                   :columns="list.columns"
                   :data="list.tableData"
                   @on-selection-change="selectionChange">
              <template slot-scope="{ row }"
                        slot="tradeScene">
                <span>{{ row.tradeScene==1?'商家扫卡':row.tradeScene==2?'用户扫码':row.tradeScene==3?'商家收银台收款':'在线兑换' }} </span>
              </template>
              <template slot-scope="{ row }"
                        slot="tradeChannel">
                <span>{{ row.tradeChannel==1?'微信支付':row.tradeChannel==2?'支付宝':row.tradeChannel==3?'口信支付':row.tradeChannel==4?'现金支付':'积分支付' }} </span>
              </template>
              <!-- <template slot-scope="{ row }"
                        slot="status">
                <Button v-if="row.status==='0'"
                        type="success"
                        size='small'
                        style="">交易完成</Button>
                <Button v-if="row.status==='1'"
                        type="error"
                        size='small'
                        style="">交易失败</Button>
                <Button v-if="row.status==='2'"
                        type="warning"
                        size='small'
                        style="">交易取消</Button>
              </template> -->
            </Table>
          </div>
          <div class="normal-list-page-ft clearfix">
            <Page class="fr"
                  :total="queryData.totalRecord"
                  :page-size="queryData.pageSize"
                  :current="queryData.page"
                  @on-change="changePage"
                  @on-page-size-change="onPageSizeChange"
                  show-elevator
                  show-total
                  show-sizer></Page>
          </div>
        </div>
      </div>
      <Modal width="600"
             v-model="logShow"
             footer-hide
             title="交易详情">
        <div>
          <div style="display:flex;margin-bottom:10px">
            <!-- <Input class="mr-10"
                   v-model="queryLog.businessName"
                   placeholder="商户名称"
                   style="width: 200px" />

            <sele @ProvinceData="childByValue2"
                  class="mr-10"
                  style="width:200px"></sele>
            <Button type="primary"
                    custom-icon="iconfont icon-chaxun"
                    size="small"
                    @click="getLog">查找</Button> -->

          </div>
          <Table stripe
                 highlight-row
                 border
                 :content="self"
                 :columns="logCol"
                 :data="logList"></Table>
        </div>
        <!-- <div class="page">
          <Page :total="queryLog.totalRecord"
                :page-size="queryLog.limit"
                :current="queryLog.page"
                show-total
                show-elevator
                @on-change="logCpage"></Page>
        </div> -->
      </Modal>
      <Modal v-model="modal.wuye.isShow"
             :loading="modal.wuye.loading"
             :mask-closable="false"
             :footer-hide='true'
             :title="modal.wuye.title"
             @on-ok="postData">
        <Form ref="systemFrom"
              :model="modal.wuye.formData"
              :rules="modal.wuye.rules"
              :label-width="120">
          <FormItem label="物业id">
            <Input disabled
                   v-model="modal.wuye.formData.wuyeId"
                   style="width: 300px" />
          </FormItem>
          <FormItem label="分数">
            <Input disabled
                   v-model="modal.wuye.formData.wuyeScore"
                   style="width: 300px" />
          </FormItem>
          <FormItem label="物业名称">
            <Input disabled
                   v-model="modal.wuye.formData.wuyeName"
                   style="width: 300px" />
          </FormItem>
          <FormItem label="物业考评时间">
            <Input disabled
                   v-model="modal.wuye.formData.wuyeTime"
                   style="width: 300px" />
          </FormItem>
          <FormItem label="考评图片"
                    prop="sendParam">
            <div v-if="modal.wuye.formData.wuyeUrls.length"
                 style="display:flex;width:300px">
              <img v-for="img in modal.wuye.formData.wuyeUrls"
                   :src="img"
                   :key="img"
                   @click="showBigPic(img)"
                   alt=""
                   style="width:80px;margin:0 10px 10px 10px">
            </div>
          </FormItem>
        </Form>
      </Modal>
      <Modal v-model="modal.img.isShow"
             width="800px">
        <img :src="modal.img.url"
             style="width: auto; height: 500px; display: block; margin: 0 auto" />
        <div slot="footer" />
      </Modal>
    </div>
  </div>
</template>
<script>
import sele from '@/view/test/city.vue'
import RecordApi from '@/api/business/record.js'
import { Message } from 'iview'
export default {
  components: {
    sele
  },
  mounted () {
    let area = window.defArea
    this.queryData.provid = area[0]
    this.queryData.cityid = area[1]
    this.queryData.distid = area[2]
    this.getTableData()
  },
  data () {
    return {
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          // {
          //   type: 'selection',
          //   width: 50,
          //   align: 'center'
          // },
          /** 开始自动生成 */
          { title: 'id', key: 'id', align: 'center', width: '100px' },
          {
            title: '商户名称',
            key: 'businessName',
            align: 'center',
            width: '140px'
          },
          {
            title: '商家地址',
            key: 'businessAddress',
            align: 'center'
          },
          {
            title: '用户卡号',
            key: 'cardNo',
            align: 'center',
            width: '130px'
          },
          {
            title: '用户姓名',
            key: 'userName',
            align: 'center',
            width: '100px'
          },
          {
            title: '门牌号',
            key: 'address',
            align: 'center',
            width: '100px'
          },
          {
            title: '收付款场景',
            key: 'tradeScene',
            align: 'center',
            width: '150px',
            slot: 'tradeScene'
          },
          {
            title: '支付渠道',
            key: 'tradeChannel',
            align: 'center',
            width: '130px',
            slot: 'tradeChannel'
          },
          {
            title: '交易状态',
            key: 'status',
            align: 'center',
            width: '130px',
            render: (create, params) => {
              let s = params.row.status
              let color, text
              if (s == '0') {
                color = '#5ed71a'
                text = '交易完成'
              } else if (s == '1') {
                color = '#d72c23'
                text = '交易失败'
              } else {
                color = '#4547ff'
                text = '交易取消'
              }
              return create(
                'div',
                {
                  style: {
                    color: color,
                    borderRadius: '20px'
                  }
                },
                text
              )
            }
          },
          {
            title: '商品数目',
            key: 'goodsNum',
            align: 'center',
            width: '80px'
          },
          {
            title: '商品价格',
            key: 'goodsPrice',
            align: 'center',
            width: '80px'
          },
          {
            title: '实际交易价格',
            key: 'tradePrice',
            align: 'center',
            width: '80px'
          },
          {
            title: '经手人',
            key: 'insertName',
            align: 'center',
            width: '80px'
          },
          {
            title: '添加时间',
            key: 'insertTime',
            align: 'center',
            width: '100px'
          },
          {
            // 操作
            title: '操作',
            key: 'action',
            width: 120,
            align: 'center',
            fixed: 'right',
            render: (create, params) => {
              // 创建父节点
              return create('div', [
                create(
                  'i-button',
                  {
                    props: { type: 'success', size: 'small' },
                    style: { margin: '0 3px' },
                    on: {
                      click: () => {
                        this.queryLog.tradeId = params.row.tradeId
                        this.getLog()
                        this.logShow = true
                      }
                    }
                  },
                  '查看详情'
                )
              ])
            }
          }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0
      },
      queryExport: {},
      // 商户管理员参数
      queryLog: {
        limit: 10,
        page: 1,
        totalRecord: ''
      },
      logShow: false, // 商户管理员是否显示
      logList: [], // 商户管理员列表
      logCol: [
        { align: 'center', title: '序号', type: 'index', width: 80 },
        {
          align: 'center',
          title: '商品名称',
          key: 'goodsName'
        },
        {
          align: 'center',
          title: '商品条形码',
          key: 'goodsCode'
        },
        {
          align: 'center',
          title: '成交价格',
          key: 'originalPrice'
        },
        {
          align: 'center',
          title: '交易总额',
          key: 'totalMoney'
        }
      ],
      // 政府考评
      modal: {
        government: {
          id: '',
          isShow: false,
          bigPicVisible: false,
          loading: true,
          bigPicUrl: '',
          type: 'create', // create 新建，update 修改
          title: '政府考评结果',
          formData: {
            governmentUrls: []
          }
        },
        wuye: {
          id: '',
          isShow: false,
          bigPicVisible: false,
          loading: true,
          bigPicUrl: '',
          type: 'create', // create 新建，update 修改
          title: '物业考评结果',
          formData: {
            wuyeUrls: []
          }
        },
        img: {
          isShow: false,
          url: ''
        }
      }
    }
  },
  methods: {
    // 六级联动
    startTime (e) {
      let that = this
      that.queryExport.startTime = e
    },
    endTime (e) {
      let that = this
      that.queryExport.endTime = e
    },
    childByValue (data) {
      let area = this.queryData
      area.provid = data.provid || ''
      area.cityid = data.cityid || ''
      area.distid = data.distid || ''
      area.strtid = data.strtid || ''
      area.commid = data.commid || ''
      area.comminid = data.comminid || ''
    },
    // 获取列表
    getTableData () {
      console.log('query', this.queryData)
      const that = this
      that.queryData.totalRecord = undefined
      RecordApi.getPageList(that.queryData)
        .then((res) => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          //   that.queryData.page = res.data.pageNum
          that.queryData.limit = res.data.pageSize
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    // 导出
    exportExcel () {
      this.queryExport.businessName = this.queryData.businessName
      this.queryExport.provid = this.queryData.provid
      this.queryExport.cityid = this.queryData.cityid
      this.queryExport.distid = this.queryData.distid
      this.queryExport.strtid = this.queryData.strtid
      this.queryExport.commid = this.queryData.commid
      this.queryExport.comminid = this.queryData.comminid
      this.queryExport.insertName = this.queryData.insertName
      console.log('query', this.queryExport)
      axios({
        url: '/api/business/trade/detail/export',
        method: 'get',
        responseType: 'blob',
        params: this.queryExport
      }).then((res) => {
        const content = res.data
        const blob = new Blob([content])
        const fileName = '交易记录.xls'
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },
    // 获取详情
    async getLog () {
      let data = (await RecordApi.detial(this.queryLog)).data
      this.queryLog.totalRecord = data.totalRecord
      this.logList = data
    },
    // 删除
    delData (ids) {
      if (!ids.length) {
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        content:
          '<p>您确认删除id为 <strong>' +
          ids.toString() +
          '</strong> 的记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          MallBillApi.del({
            ids: ids
          }).then((res) => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.queryData.page = 1
              this.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },

    // 排量删除
    batchDel () {
      let ids = []
      this.list.selections.forEach((element) => {
        ids.push(element.id)
      })
      if (!ids.length) {
        this.$Message.error({
          content: '请先选择要删除的项！',
          duration: 3
        })
      }
      this.delData(ids)
    },
    // 查询
    inQuire () {
      const that = this
      that.getTableData()
    },
    // 全选，不全选
    selectionChange (args) {
      this.list.selections = args
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    },
    // 考评详情
    showModal (row, type) {
      if (type === 'wuye') {
        this.modal.wuye.type = 'wuye'
        this.modal.wuye.title = '物业考评结果'
        // 不请求后端，直接list取对象
        // this.modal.mallAdvertising.formData = JSON.parse(
        //   JSON.stringify(this.list.tableData)
        // )[index];
        ClearApi.getWuye(row.id)
          .then((res) => {
            this.modal.wuye.formData = res.data
            this.modal.wuye.isShow = true
          })
          .catch((error) => {
            Message.error(error)
          })
      } else {
        this.modal.government.type = 'government'
        this.modal.government.title = '政府考评结果'
        // 不请求后端，直接list取对象
        // this.modal.mallAdvertising.formData = JSON.parse(
        //   JSON.stringify(this.list.tableData)
        // )[index];
        ClearApi.getGovernment(row.id)
          .then((res) => {
            this.modal.government.formData = res.data
            this.modal.government.isShow = true
          })
          .catch((error) => {
            Message.error(error)
          })
      }
    },
    showBigPic (item) {
      this.modal.img.isShow = true
      this.modal.img.url = item
    }
  },

  created () {
    this.getTableData()
  }
}
</script>
